<template>
  <el-row>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ name: 'dashboard' }">控制台</el-breadcrumb-item>
      <el-breadcrumb-item>包月用户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <blank />

    <el-row>
      <el-col :span="24">
        <el-table
          :data="users"
          border
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>

          <el-table-column prop="OpenId" label="OpenId" show-overflow-tooltip>
          </el-table-column>

          <el-table-column label="头像" show-overflow-tooltip align="center">
            <template scope="scope">
              <img :src="scope.row.AvatarUrl" class="avatar" />
            </template>
          </el-table-column>

          <el-table-column prop="NickName" label="昵称" show-overflow-tooltip>
          </el-table-column>

          <el-table-column prop="Gender" label="性别" show-overflow-tooltip>
          </el-table-column>

          <el-table-column prop="Province" label="省份" show-overflow-tooltip>
          </el-table-column>

          <el-table-column prop="City" label="城市" show-overflow-tooltip>
          </el-table-column>

          <el-table-column prop="Country" label="国家" show-overflow-tooltip>
          </el-table-column>

          <el-table-column label="操作">
            <template scope="scope">
              <span class="get-order">查看订单</span>
            </template>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>

    <blank />

    <el-row>
      <el-col :span="24">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
  import blank from '@/components/Blank'
  import { Message } from 'element-ui'
  import ax, { errhandler } from '@/api/_axios-config'
  import * as apis from '@/api/_api'

  export default {
    name: 'month',
    data () {
      return {
        currentPage: 1,
        pageSize: 20,
        total: 100,
        users: []
      }
    },
    methods: {
      handleSizeChange (size) {
        this.pageSize = size
        this.getUserInfo(this.pageSize, this.currentPage)
      },
      handleCurrentChange (page) {
        this.currentPage = page
        this.getUserInfo(this.pageSize, this.currentPage)
      },
      getUserInfo (pageSize, page) {
        ax.get(apis.MONTHUSERS, { params: { pageSize: pageSize, page: page } }).then(
          response => {
            let result = response.data
            if (result.BoolStatus) {
              this.users = result.Data.data
              this.total = result.Data.totalCount
            } else {
              Message.info('未获取用户信息')
            }
          }
        ).catch(
          err => {
            errhandler(err)
          }
        )
      }
    },
    components: { blank },
    created: function () {
      this.getUserInfo(this.pageSize, this.currentPage)
    }
  }
</script>

<style lang="stylus">
  .avatar
    width 100px
    height 100px

  .get-order
    color lightblue    
</style>
